<template>
  <div style="display: inline-block">
    <el-button :is-padding="true" :icon="icon" :class="type" class="btn-icon" :style="isPadding ? 'padding-left:0;color:' + color : 'color:' + color " size="mini" :type="type" :disabled="isAble" @click="uploadClick"> {{ name }}</el-button>
    <input ref="uploadInput" name="files" type="file" style="display: none;" :multiple="multiple" @change="fileChange">
  </div>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {
  props: {
    uploadType: {
      type: Array,
      default: () => {
        // return ['.xlsx', '.xls', '.XLS', '.docx', '.jpg', '.png', '.gif', '.pdf']
        return []
      }
    },
    isPadding: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: true
    },
    icon: {
      type: String,
      default: 'iconfont icon-shangchuan'
    },
    url: {
      type: String,
      default: ''
    },
    isAble: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'primary'
    },
    name: {
      type: String,
      default: '导入'
    },
    tip: {
      type: String,
      default: ''
    },
    params: {
      type: Object,
      default: () => {
        return {}
      }
    },
    color: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    // 点击上传
    uploadClick() {
      if (this.tip) {
        this.$confirm(this.tip, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(valid => {
          this.$refs.uploadInput.value = ''
          this.$refs.uploadInput.click()
        }).catch(() => {
          console.log('取消')
        })
        return
      }
      this.$refs.uploadInput.value = ''
      this.$refs.uploadInput.click()
    },
    fileChange(e) {
      for (let j = 0; j < this.$refs.uploadInput.files.length; j++) {
        const file = this.$refs.uploadInput.files[j]
        let pass = false
        if (this.uploadType.length > 0) {
          this.uploadType.forEach(item => {
            if (file.name.includes(item)) {
              pass = true
            }
          })
        } else {
          pass = true
        }
        if (file.size / 1024 / 1024 > 50) {
          this.$message.error(`上传的图片不能大于50M`)
          file.value = ''
          pass = false
          return
        }
        if (!pass) {
          this.$message.info(`请上传以${this.uploadType}结尾的文件`)
          return
        }
        // console.log(Object.keys(this.params),66666)
        // if (Object.keys(this.params).length > 0) {
        //   for (const i in this.params) {
        //     formData.append(i, this.params[i])
        //   }
        // }
      }
      var files = e.target.files
      var formData = new FormData()
      files.forEach(e => {
        formData.append('files', e)
      })
      var _this = this
      var _loading = this.$loading({
        lock: true,
        text: '文件上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.2)'
      })

      axios({
        withCredentials: true,
        url: process.env.VUE_APP_BASE_Upload_api + _this.url,
        method: 'post',
        data: formData,
        processData: false,
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': 'bearer ' + getToken() || ''
        }

      }).then(res => {
        _loading.close()
        if (res.data.code === 0) {
          _this.$message.success('上传成功')
          this.$emit('input', res.data.data)
        } else {
          _this.$message.error('上传失败' + res.data.msg)
        }
        this.$emit('handFile', res.data.data)
      }).catch((err) => {
        _loading.close()
        _this.$message.error('上传失败' + err)
      })
    }

  }
}
</script>
<style>
.text {
  border: none;
  text-align: left;
}
.btn-icon {
  width: 110px;
  height: 32px;
  font-size: 12px !important;
}
.btn-col{
  color: #fff !important;
}
</style>
